<template>
    <div class="drawer-load"
        @click="$store.state.Site.drawerDis = false">

        <transition name="slide-fade">
            <div class="drawer"
                v-show="$store.state.Site.drawerDis"
                v-bind:style="{width: drawerWidth || 350 + 'px'}"
                @click.stop>

                <div class="drawer-head">
                    <i class="el-icon-close" @click="$store.state.Site.drawerDis = false"></i>
                    <el-tabs v-model="labelName">
                        <el-tab-pane label="搜索筛选" name="first"></el-tab-pane>

                    </el-tabs>
                </div>
                <div class="drawer-body">
                  <slot></slot>
                  <div class="drawer-button">
                    <el-button>清空筛选条件</el-button>
                    <el-button type="primary">筛选</el-button>
                  </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>


export default {
    props: ['drawerDis','drawerWidth'],
    components: {

    },
    data(){
      return {
        labelName: 'first',
        form: {

        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
}
</script>

<style scoped lang="scss">
    .drawer-load{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.5);
    }
    .drawer{
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background: #fff;
    }


    .slide-fade-enter-active {
        transition: all .5s ease;
    }
    .slide-fade-leave-active {
        transition: all .5s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
    .drawer-head{
        position: relative;
        .el-icon-close{
            cursor: pointer;
            font-size: 20px;
            padding-top: 10px;
            position: absolute;
            z-index: 10;
            right: 15px;
            color: #999;

        }
    }
    .drawer-body{
      padding: 0 25px;
    }
    .drawer-button{
      text-align: right;
      padding-top: 20px;
    }
</style>
